<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点聚合</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=e7edfb1075962c5c85af609e9b01a796&plugin=AMap.CitySearch"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .info {
            border: solid 1px silver;
        }
        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }
        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }
        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }
        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }
        div.info-middle {
            font-size: 12px;
            padding: 6px;
            line-height: 20px;
        }
        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }
        div.info-bottom img {
            position: relative;
            z-index: 104;
        }
        span {
            margin-left: 5px;
            font-size: 11px;
        }
        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div id="tip"></div>
<div class="button-group">
    <input type="button" class="button" value="自定义样式点聚合" id="add1"/>
    <input type="button" class="button" value="默认样式点聚合" id="add0"/>
	<input type="button" class="button" value="显示当前城市" onClick="javascript:showCityInfo()"/>
	
</div>
<script>
    var cluster, markers = [];
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    map.on('mousewheel',function(e){
    console.log(map.getZoom());
        
        });
    //获取用户所在城市信息
    function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function(status, result) {
	
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    var cityinfo = result.city;
                    var citybounds = result.bounds;
                    document.getElementById('tip').innerHTML = '您当前所在城市：'+cityinfo;
                    //地图显示当前城市
                    map.setBounds(citybounds);
                }
            } else {
                document.getElementById('tip').innerHTML = result.info;
            }
        });
    }
    // 请求数据
	$.ajax({
		url:"{{route('map')}}",
		type:'post',
		dataType:'json',
		data:{},
		success:function(data){
			
		 for (var i = 0; i < data.length; i++) {
				var str=data[i].position.position;
				var markerPosition = str.split(",");
				var marker = new AMap.Marker({
					position: markerPosition,
					map: map,
					icon: "http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/marker.png",
					offset: {
						x: -8,
						y: -34
					}
				});
				markers.push(marker);
				//鼠标点击marker弹出自定义的信息窗体
				var addr=data[i]['address'];
				if(data[i]['address']=='-') addr=data[i]['shortform'];
				marker.content = '<p>地址:'+addr+'</p><p>购买时间:'+data[i]['joindate']+'</p><img height=80px src="http://wsspha.cn/img/avatar.png" alt="" />';
		        marker.on('click', markerClick);

			}
			addCluster(0);
		},
		Error:function(){
			
		}
	});

	var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();

    AMap.event.addDomListener(document.getElementById('add0'), 'click', function() {
        addCluster(0);
    });
    AMap.event.addDomListener(document.getElementById('add1'), 'click', function() {
        addCluster(1);
    });
    
    
    // 添加点聚合
    function addCluster(tag) {
        if (cluster) {
            cluster.setMap(null);
        }

        if (tag == 1) {
            var sts = [{
                url: "http://a.amap.com/lbs/static/img/1102-1.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -30)
            }, {
                url: "http://a.amap.com/lbs/static/img/2.png",
                size: new AMap.Size(32, 32),
                offset: new AMap.Pixel(-16, -30),
                content:'梵蒂冈梵蒂冈'
            }, {
                url: "http://lbs.amap.com/wp-content/uploads/2014/06/3.png",
                size: new AMap.Size(48, 48),
                offset: new AMap.Pixel(-24, -45),
                textColor: '#CC0066'
            }];
            map.plugin(["AMap.MarkerClusterer"], function() {
                cluster = new AMap.MarkerClusterer(map, markers, {
                    styles: sts
                });
            });
        } else {
            map.plugin(["AMap.MarkerClusterer"], function() {
                cluster = new AMap.MarkerClusterer(map, markers);
            });
            
            AMap.event.addListener(cluster, "click", function(e){
                var cr=e.target; 
          
//                 console.log(e);
//                 console.log(cr.getClustersCount());
//                 console.log(cr.getStyles());
                var mp=cr.getMap(); 
                var mpZoom=mp.getZoom();
                console.log(mpZoom) 
                var clustermarks=e.markers; 
                if(mpZoom>=18){
                    
                    
                    } 
                
             });
            
        }
    }
</script>
</body>
</html>